<template>
    <div class="rank-card row"
        @click.stop="toPage">
        <img src="../assets/img/card.jpg"
            alt>
        <div class="text column">
            <div class="title">
                <a>{{info.title}}</a>
            </div>
            <p>{{info.content}}</p>
            <div class="row">
                <el-rate v-model="info.imgNumber"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"></el-rate>({{info.peopleNum}}人评价)
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "rank-card",
    data() {
        return {
            value: 3.5
        }
    },
    props: {
        info: {
            type: Object,
            required: true
        }
    },
    methods: {
        toPage() {
            this.$router.push({ path: "/film_details" })
        }
    }
}
</script>

<style lang="less" scoped>
    .rank-card {
        box-sizing: border-box;
        border-top: 1px dashed #dddddd;
        min-height: 160px;
        padding-top: 18px;
        padding-bottom: 18px;
        img {
            width: 75px;
        }
        .text {
            margin-left: 20px;
            p {
                font-size: 13px;
                margin-bottom: 18px;
                margin-top: 15px;
            }
            .title {
                a {
                    color: #37a;
                    text-decoration: none;
                    font-size: 14px;
                    &:hover {
                        color: #fff;
                        background-color: #27a;
                    }
                }
            }
        }
    }
</style>
